import { useState } from 'react'

import { View } from '@tarojs/components'
import KindSelect from './KindSelect'
import MemberSelect from './MemberTypeSelect'
import SearchBar from '../../../components/SearchBar'

const ArticleFilter = ({ onChange }) => {
	const [memberType, updateMemberType] = useState(0)

	const onSearchChange = (text: string) => {
		onChange({ search: text })
	}

	const onKindChange = (kind: string) => {
		onChange({ kind })
	}

	return (
		<View style='display: grid; grid-template-areas:"a b""c c"; grid-template-columns: 1fr 1fr;'>
			<MemberSelect onChange={updateMemberType} style='grid-area:a' />
			<KindSelect
				onChange={onKindChange}
				memberType={memberType}
				style='grid-area:b'
			/>
			<SearchBar
				onChange={onSearchChange}
				showSearchButton
				style='grid-area:c'
			/>
		</View>
	)
}
export default ArticleFilter
